import React , { Component } from "react";


import {range} from "../../../utils/tools"
import Base from "./Base"
import HKBall from "../../BallStyle/HKBall"
import {autoSelectLM,LMReset} from "../../../redux/actions/betcenterAction"
import {changeLMLeibie,changeLMPlayModule} from "../../../redux/actions/betcenterAction"
import {orderNum} from "../../../utils/tools"
export default class LM extends Component{
  constructor (props){
    super(props)
    this.state= {
     isShow:[],
     leibie:0,
     playMode:1,
     dm1:"",
     dm2:"",
     selectNum:[],
     peilv:{}
    }
 }
 isIncude(state,item){
  var num = state.indexOf(item)
  num< 0 ? state.push(item) : state.splice(num,1)
 }
 getPeiyuItem() {
  const {content} = this.props;
  const {peilv} = this.state
  for (let item of content) {
    peilv[item.id] = item.pl
  }
  this.setState({
    peilv
  })
}

 show(index){
  const { isShow} = this.state
  this.isIncude(isShow,index)
  this.setState({
    isShow
  })
 }
 chooseLB(id){
  this.setState({
    leibie:id,
    selectNum:[],
    dm1:"",
    dm2:"",
  })
  const {dispatch} = this.props
  dispatch(changeLMLeibie(id))
 }
 order(item){
  const { selectNum,playMode,leibie} = this.state
  this.isIncude(selectNum,item)
  this.setState({
    selectNum
  })
  let dm1 = "";
  let dm2 = "";
  if (playMode == 2) {
  
    if (!this.state.dm1) {
      dm1 = item;
      this.setState({
        dm1: item
      });
    } else {
      dm1 = this.state.dm1;
    }

    if (this.state.dm1 && !this.state.dm2 && leibie<2) {
      dm2 = item;
      this.setState({
        dm2: item
      });
    } else {
      dm2 = this.state.dm2;
    }
  }
  console.log(leibie,playMode,selectNum,dm1, dm2);
  
  this.props.order(leibie,playMode,selectNum,dm1, dm2)
}
setPlayMode(index){
  this.setState({
    selectNum:[],
    playMode:index,
    dm1:"",
    dm2:"",
  })
  const {dispatch} = this.props
  dispatch(changeLMPlayModule(index))
}
componentDidMount(){
  // console.log(Object.keys(this.state.peilv).length ,"adsf");
  Object.keys(this.state.peilv).length == 0 && this.getPeiyuItem()
}
componentWillReceiveProps(newprops){
    const {betcenter,dispatch} = newprops
    let autoSelect = betcenter.get("autoSelectLM")
    let reset = betcenter.get("LMReset")
    if(autoSelect){ // 为真触发 机选一注
      this.state.selectNum = [] 
      const {leibie,playMode} = this.state
      // 自动点击
      // 随机三个数 根据 liebie 判断 
             let minlen = 2
              if(leibie <= 1){
                minlen = 3
              }
              orderNum(minlen,49,(i)=>this.order(i))
        dispatch(autoSelectLM(false))
    }
    if(reset){
      this.state.selectNum = [] 
      dispatch(LMReset(false))
    }
}
  render(){
    const {content,select} = this.props;
    const {selectNum,isShow,leibie,peilv,playMode,dm1,dm2} = this.state;
    // console.log(content,peilv,"LM");

     return  <div className="panl">
               <div className="panel">
                <div className="panel_head">
                  <div className="icon" onClick={()=>{
                    this.show(0)
                  }}><i className={isShow.indexOf(0)>-1 ? "iconfont icon-xiala shang" : "iconfont icon-xiala"}></i></div>
                  类别
                </div>
            <div className={isShow.indexOf(0)>-1 ? "panel_body hidden" : "panel_body"}>
                <div className="leibie">
                <li  className={leibie == 0 ? "selected full" : "full"} onClick={()=>{this.chooseLB(0)}}>
                  <p>三中二</p>
                  <div className="pl">
                  <span>中二 <span className="red">{peilv["LM-3Z2-Z2"]}</span></span>
                  <span>中三 <span className="red">{peilv["LM-3Z2-Z3"]}</span></span>
                  </div>
                </li>
                <li className={leibie == 1 ? "half selected" : "half"} onClick={()=>{this.chooseLB(1)}}>
                  <p>三全中</p>
                  <div className="pl">
                  <span className="red">{peilv["LM-3QZ-3QZ"]}</span>
                  </div>
                </li>
                <li className={leibie == 2 ? "half selected" : "half"} onClick={()=>{this.chooseLB(2)}}>
                  <p>二全中</p>
                  <div className="pl">
                  <span className="red">{peilv["LM-2QZ-2QZ"]}</span>
                  </div>
                </li>
                <li className={leibie == 3 ? "selected full" : "full"} onClick={()=>{this.chooseLB(3)}}>
                  <p>二中特</p>
                  <div className="pl">
                  <span>中特 <span className="red">{peilv["LM-2ZT-ZT"]}</span></span>
                  <span>中二 <span className="red">{peilv["LM-2ZT-TZ2"]}</span></span>
                  </div>
                </li>
                <li className={leibie == 4 ? "half selected" : "half"} onClick={()=>{this.chooseLB(4)}}>
                  <p>特串</p>
                  <div className="pl">
                  <span className="red">{peilv["LM-TC-TC"]}</span>
                  </div>
                </li>
                </div>
            </div>
          </div>
               <div className="panel">
            <div className="panel_head">
              <div className="icon" onClick={()=>{
                this.show(1)
              }}>
                 <i className={isShow.indexOf(1)>-1 ? "iconfont icon-xiala shang" : "iconfont icon-xiala"}></i>
              </div>
              号码
            </div>
            <div className={isShow.indexOf(1)>-1 ? "panel_body hidden" : "panel_body"}>
            <ul className="leibie LM">
              <li className={playMode == 1 ? "half selected" : "half"} onClick={()=>{this.setPlayMode(1)}}>
                  <p>复式</p>
                </li>
                <li className={playMode == 2 ? "half selected" : "half"} onClick={()=>{this.setPlayMode(2)}}>
                  <p>胆拖</p>
                </li>
            </ul>
            {
              playMode == 2 && <ul className="leibie LM">
                  <li className="half">
                  胆1: <h4>{dm1 ? <HKBall num={dm1*1}></HKBall>: '请选择' }</h4>
                  </li>
                {
                  (leibie == 0 ||  leibie == 1) && <li className="half">
                  胆2: <h4>{dm2 ? <HKBall num={dm2*1}></HKBall>: '请选择' }</h4>
                  </li>
                }
            </ul>
            }
            <div className="peilv">
            <div className="num">
              {
                range(1,49).map((item,index)=>{
                  return <li key={index} onClick={()=>{
                        this.order(item)
                  }}
                  className={selectNum.indexOf(item) !== -1 ? "selected" : ""}
                  >
                  <HKBall num={item*1}></HKBall>
                  </li>
                })
              }
              </div>
        </div>
            </div>
          </div>

      </div>
 

  }
}